<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>${fns:getConfig('productName')} 登录</title>
    <meta name="decorator" content="blank"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="${ctxStatic}/css/thin-admin.css" rel="stylesheet" media="screen">
    <link href="${ctxStatic}/style/style.css" rel="stylesheet">
    <style type="text/css">
    	.footer{position:absolute;} .footer, .footer a{color:#779ACA}
    </style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请填写用户名."},password: {required: "请填写密码."},
					validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				} 
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>
</head>
  <body>
    <div class="login-logo">
      <img src="${ctxStatic}/images/logo.png" width="147" height="33"></div>
    <div class="widget">
      <div class="login-content">
        <div class="widget-content" style="padding-bottom:0;">
			<div id="messageBox" class="alert alert-block alert-danger fade in ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
				<label id="loginError" class="error">${message}</label>
			</div>
          <form id="loginForm" method="post" action="${ctx}/login" class="no-margin">
            <h3 class="form-title">${fns:getConfig('productName')}</h3>
            <fieldset>
              <div class="form-group no-margin">
                <label for="username">登录名</label>
                <div class="input-group input-group-lg">
                  <span class="input-group-addon">
                    <i class="icon-user"></i>
                  </span>
                  <input type="text" placeholder="请输入用户名" class="form-control input-lg" id="username" name="username" value="${username}"></div>
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <div class="input-group input-group-lg">
                  <span class="input-group-addon">
                    <i class="icon-lock"></i>
                  </span>
                  <input type="password" placeholder="请输入密码" class="form-control input-lg" id="password" name="password"></div>
              </div>
	          <c:if test="${isValidateCodeLogin}">
	              <div class="form-group">
	                <label for="validateCode">验证码</label>
	                <div class="input-group input-group-lg">
	                  <span class="input-group-addon">
	                    <i class="icon-lock"></i>
	                  </span>
	                  <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;" imageCssStyle="height:41px" buttonCssStyle="display:none"/></div>
	              </div>
              </c:if>
            </fieldset>
            <div class="form-actions">
              <label class="checkbox">
                <div class="checker">
                  <span>
                    <input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/></span>
                </div>下次不需要再登录</label>
              <button class="btn btn-warning pull-right" type="submit">登录
                <i class="m-icon-swapright m-icon-white"></i></button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!--switcher html start-->
    <div class="demo_changer active" style="right: 0px;">
      <div class="demo-icon"></div>
      <div class="form_holder">
        <div class="predefined_styles">
          <a class="styleswitch" rel="a" href="">
            <img alt="" src="${ctxStatic}/images/a.jpg"></a>
          <a class="styleswitch" rel="b" href="">
            <img alt="" src="${ctxStatic}/images/b.jpg"></a>
          <a class="styleswitch" rel="c" href="">
            <img alt="" src="${ctxStatic}/images/c.jpg"></a>
          <a class="styleswitch" rel="d" href="">
            <img alt="" src="${ctxStatic}/images/d.jpg"></a>
          <a class="styleswitch" rel="e" href="">
            <img alt="" src="${ctxStatic}/images/e.jpg"></a>
          <a class="styleswitch" rel="f" href="">
            <img alt="" src="${ctxStatic}/images/f.jpg"></a>
          <a class="styleswitch" rel="g" href="">
            <img alt="" src="${ctxStatic}/images/g.jpg"></a>
          <a class="styleswitch" rel="h" href="">
            <img alt="" src="${ctxStatic}/images/h.jpg"></a>
          <a class="styleswitch" rel="i" href="">
            <img alt="" src="${ctxStatic}/images/i.jpg"></a>
          <a class="styleswitch" rel="j" href="">
            <img alt="" src="${ctxStatic}/images/j.jpg"></a>
        </div>
      </div>
    </div>
    <!--switcher html end-->
    <script src="${ctxStatic}/assets/switcher/switcher.js"></script>
    <script src="${ctxStatic}/assets/switcher/moderziner.custom.js"></script>
    <link href="${ctxStatic}/assets/switcher/switcher.css" rel="stylesheet">
    <link href="${ctxStatic}/assets/switcher/switcher-defult.css" rel="stylesheet">
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/a.css" title="a" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/b.css" title="b" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/c.css" title="c" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/d.css" title="d" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/e.css" title="e" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/f.css" title="f" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/g.css" title="g" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/h.css" title="h" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/i.css" title="i" media="all" />
    <link rel="alternate stylesheet" type="text/css" href="${ctxStatic}/assets/switcher/j.css" title="j" media="all" />
	<div class="footer">
		Copyright &copy; 2012-${fns:getConfig('copyrightYear')} <a href="${pageContext.request.contextPath}${fns:getFrontPath()}">${fns:getConfig('productName')}</a> - Powered By <a href="http://jeesite.com" target="_blank">JeeSite</a> ${fns:getConfig('version')}
	</div>
</body>
</html>